<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="jquery-1.11.3.js"></script>
</head>
<body>
<div class="shadow">
    <img id="close" src="close.jpg">
</div>
<style>
    .shadow{
        position: absolute;
        top: 200px;
        bottom: 200px;
        left: 200px;
        right: 200px;
        background-color: #ff5383;
        display: none;
    }
    #close{
        position: absolute;
        right: 0;
        top: 0;
    }
    .d{width:160px;height: 160px;
        background-image: url(framels.jpg);
        float:left;
        text-align: center;
        box-sizing: border-box;
        line-height: 160px;

    }
    .pt{
        padding: 12.5px 0 12.5px 0;
        background-image: url("framept.jpg");
    }
    .ls{
        padding: 35px 0 35px 0;
        background-image: url("framels.jpg");
    }
</style>
<script>
    $(document).ready(function(){
        for(var i=1;i<=30;i++){
      var node=$("<div class='d'><img src='photo/thumb/"+i+".jpg'/></div>");
        $("body").append(node);
        }
        $("img").click(function(){
            $(".shadow").show();
        });
        $("#close").click(function(){
            $(".shadow").hide();
        });
    });
    $(window).load(function(){
        for(var i=0;i<=30;i++) {
            var node.
            var h = $("img").eq(i).height();
            var w = $("img").eq(i).width();
            console.log( h + ":" + w);
            if (h > w) {
                $("div").eq(i).addClass("pt");
            } else {
                $("div").eq(i).addClass("ls");
            }
        }
    });
</script>
</body>
</html>